<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        padding:0;
        margin:0;
    }
    span{
        width:31px;
        height:41px;background-image: url(star1.png);background-size: 100% 100%;position: absolute;animation:flash 1s alternate infinite;
    }
    body,html{
        background-color: #000000;
    }
    @keyframes flash {
        0%{
            opacity:0;
        }
        100%{
            opacity:1;
        }
    }
    span:hover{
        transform:scale(2,2) rotate(180deg)!important;transition: 1s;
    }
</style>
<body>
    <span></span>
</body>
<script>
    var screenX=document.documentElement.clientWidth||document.body.clientWidth;
    var screenY=document.documentElement.clientHeight||document.body.clientHeight;

    for(var i=0;i<150;i++){
        var span=document.createElement("span");
        document.body.appendChild(span);
        span.style.left=parseInt(Math.random()*screenX)+"px";
        span.style.top=parseInt(Math.random()*screenY)+"px";
        var scale=Math.random();
        span.style.transform="scale("+scale+","+scale+")";
        span.style.animationDelay=Math.random()*1.5+"s";
    }
</script>
</html>